<template>
    <a-layout class="home-layout">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo">
                <div class="span" v-show="!collapsed">天喻 | 模型数据管理</div>
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item v-for="item in menuList" :key="item.name" @click="goto(item.path)">
                    <component :is="item.meta.icon" />
                    <span>{{ item.title }}</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0">
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
            </a-layout-header>
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                <router-view />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import router from '@/router';
import { useRoute } from 'vue-router';

const selectedKeys = ref([]);
const collapsed = ref(false);
const menuList = ref([]);
const route = useRoute();

function initMenu() {
    const routes = router.getRoutes();
    const homeRoutes = routes.find(item => item.name === 'Home').children || [];
    menuList.value = homeRoutes.filter((item) => {
        return item.meta?.p_name === 'Home';
    });
}

initMenu();

// 在组件挂载后获取当前路由的 name 并赋值给 selectedKeys
onMounted(() => {
    selectedKeys.value = [route.name];
});

function goto(path) {
    router.push(`/home/${path}`);
}
</script>
<style lang="scss" scoped>
.home-layout {
    height: 100%;

    .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
            color: #1890ff;
        }
    }

    .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.3);
        margin: 16px;
        color: #d8dee4;
        text-align: center;
        line-height: 32px;
        font-weight: 700;
        text-wrap: nowrap;
        overflow: hidden;
    }
}

.site-layout {
    .site-layout-background {
        background: #fff;
    }
}
</style>